<%inherit file="/home_application/base_new.html"/>

<%block name="css">
<!--本模块加载的css-->
<link href="${STATIC_URL}assets/art-dialog/css/dialog.css" rel="stylesheet" type="text/css" />
</%block>


<%block name="content">
<article class="content">
    <!-- Page Heading -->
    <div class="row page-header-box">
        <div class="col-lg-12">
            <h1 class="page-header">
                UCLOUD
            </h1>
        </div>
    </div>

    <section class="main-list">
        <div class="main-wrap">

            <div class="panel panel-default">
                <div class="panel-heading">
                    虚拟机实例
                </div>

                <div class='panel-body'>
                    <div class="panel-content">
                        <table id="ucloud_manage_record" class="table table-bordered table-hover table-striped">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="side-content-wrapper hidden" id="host_side" data-type="close">
        <div class="side-content open shield-edit">
            <div class="side-detail" id="shield-detail">
                <div class="strategy-detail info-item new-strategy">
                    <!-- 主机信息 -->
                    <div class="mainframe-info info-item">
                        <p class="title">
                            <i class="iconfont icon-zhujixinxi"></i>
                            ESXI主机基本信息
                        </p>
                        <div class="detail">
                            <div class="row">
                                <div class="col-sm-6">
                                    <span class="sub-title">物理机名称：</span>
                                    <span class="sub-content">{{checked_host_index_table?checked_host_index_table.name || "空":""}}</span>
                                </div>
                                <div class="col-sm-6">
                                    <span class="sub-title">API类型：</span>
                                    <span class="sub-content">{{checked_host_index_table?checked_host_index_table.api_type || "空":""}}</span>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-6">
                                    <span class="sub-title">证书产品版本：</span>
                                    <span class='sub-content {{checked_host_index_table?(checked_host_index_table.license_product_version || "空":""}}'></span>
                                </div>
                                <div class="col-sm-6">
                                    <span class="sub-title">操作系统类型：</span>
                                    <span class="sub-content">{{checked_host_index_table?checked_host_index_table.os_type || "空":""}}</span>
                                </div>
                            </div>
                        </div>
                    </div>




                    <!-- 监控服务视图 -->
                    <div class="monitor-info info-item">
                        <div class="clearfix">
                            <div class="title pull-left">
                                <i class="iconfont icon-shitu"></i>
                                ESXI主机监视信息
                            </div>
                            <!--div class="date-select pull-right mt15">
                                查看日期：
                                <input type="text" class="form-control time-picker" id="single_graph_date" placeholder="选择日期...">
                            </div-->
                        </div>

                        <div class="monitor-chart">
                            <div class="row">
                                <div class="col-sm-12 mb20 single-contain" id="cpu_usage_maximum">
                                    <div class="chart-item">
                                        <p class="sub-title">{{checked_host_index_table.name}}</p>
                                        <div class="line-chart"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12 mb20 single-contain" id="cpu_usage_minimum">
                                    <div class="chart-item">
                                        <p class="sub-title">{{checked_host_index_table.name}}</p>
                                        <div class="line-chart"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12 mb20 single-contain" id="mem_usage_maximum">
                                    <div class="chart-item">
                                        <p class="sub-title">{{checked_host_index_table.name}}</p>
                                        <div class="line-chart"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12 mb20 single-contain" id="mem_usage_minimum">
                                    <div class="chart-item">
                                        <p class="sub-title">{{checked_host_index_table.name}}</p>
                                        <div class="line-chart"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12 mb20 single-contain" id="disk_usage_maximum">
                                    <div class="chart-item">
                                        <p class="sub-title">{{checked_host_index_table.name}}</p>
                                        <div class="line-chart"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12 mb20 single-contain" id="disk_usage_minimum">
                                    <div class="chart-item">
                                        <p class="sub-title">{{checked_host_index_table.name}}</p>
                                        <div class="line-chart"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12 mb20 single-contain" id="net_usage_maximum">
                                    <div class="chart-item">
                                        <p class="sub-title">{{checked_host_index_table.name}}</p>
                                        <div class="line-chart"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12 mb20 single-contain" id="net_usage_minimum">
                                    <div class="chart-item">
                                        <p class="sub-title">{{checked_host_index_table.name}}</p>
                                        <div class="line-chart"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="close-btn open" id="close" data-type="close">关闭</div>
    </section>
</article>


</%block>

<%block name="script">
<!--本模块加载的脚本-->
<link rel="stylesheet" type="text/css" href="${STATIC_URL}css/left-side.css">
<script type="text/javascript" src="${STATIC_URL}assets/highcharts-4.1.7/js/highcharts.js"></script>
<script type="text/javascript" src="${STATIC_URL}assets/highcharts-4.1.7/js/highcharts-more.js"></script>
<script type="text/javascript" src="${STATIC_URL}js/graph-highcharts.js"></script>
<script type="text/javascript" src="${STATIC_URL}assets/art-dialog/dist/dialog.js"></script>
<script type="text/javascript" src="${STATIC_URL}assets/twitter-bootstrap-wizard/jquery.bootstrap.wizard.js"></script>
<script type="text/javascript" src="${STATIC_URL}assets/twitter-bootstrap-wizard/prettify.js"></script>
<script type="text/javascript" src="${STATIC_URL}js/ucloud_manage.js"></script>
</%block>